{# NOTE: This is rendered both by Jinja2 then Angular.  Most of the template
should be in {% raw %} blocks.  DFIU! -#}
{% raw -%}
<!DOCTYPE html>
<html lang="en" ng-app="scoreboardApp" ng-controller="GlobalCtrl" ng-csp>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title ng-bind='config.sbname'>Scoreboard</title>
    <link href="/third_party/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/third_party/angular/angular-csp.css" rel="stylesheet">
    <link href="/css/scoreboard.css" rel="stylesheet">
    <link href="/css/scoreboard-colors.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
    <base href="/">
  </head>
  <body class='text-light' ng-controller='LoggedInCtrl'>
    <div id='loading-overlay' loading-overlay></div>
    <div class='container'>
      <header
        class='navbar navbar-default navbar-fixed-top navbar-expand-md navbar-dark'
        id='top'>
        <div class='container'>
          <div class='navbar-header'>
            <a class='btn btn-info btn-sm mobile right menu-btn'
              data-toggle='collapse'
              href='#main-navbar'><i class='material-icons'>menu</i></a>
          </div>
          <nav class='navbar-collapse collapse' id='main-navbar'>
            <a class='navbar-brand' ng-bind='config.sbname' href='/'>Scoreboard</a>
            <ul class='nav navbar-nav'>
              <li class='nav-item'><a class='nav-link' ng-href='{{config.rules}}' class='ng-hide'
                  ng-show='config.rules' highlight-active>Rules</a></li>
              <li class='nav-item'><a class='nav-link' href='/challenges' highlight-active>Challenges</a></li>
              <li class='nav-item'><a class='nav-link' href='/scoreboard' highlight-active>Scoreboard</a></li>
              <li class='nav-item'><a href='/profile' class='ng-hide nav-link' ng-show='session.user'
                  highlight-active>Profile</a></li>
              <li class='nav-item'><a href='/logout' class='ng-hide nav-link' ng-show='session.user'
                  highlight-active>Logout</a></li>
              <li class='nav-item'><a href='#' ng-href='{{config.login_url}}' ng-hide='session.user'
                  highlight-active target="_self" class='nav-link'>Login</a></li>
              <li class='nav-item'><a href='#' ng-href='{{config.register_url}}' ng-hide='session.user'
                  highlight-active target="_self" class='nav-link'>Register</a></li>
            </ul>
            <ul class='nav navbar-right'>
                <span countdown-timer id='countdown'></span>
            </ul>
          </nav>
        </div>
      </header>
      <div class='container full-height'>
        <div class='row full-height'>
          <div class='col-md-3 col-sm-3 left-sidebar full-height hidden-xs'>
              <div class='left-sidebar-background full-height'></div>
              <!-- TODO: Admin only -->
              <div id='admin-links' class='list-group ng-hide admin-links'
                ng-show='isAdmin()'>
                <a href='/admin/tags'
                  class='list-group-item' highlight-active>Tags</a>
                <a href='/admin/attachments'
                  class='list-group-item' highlight-active>Attachments</a>
                <a href='/admin/challenges'
                  class='list-group-item' highlight-active>Challenges</a>
                <a href='/admin/backups'
                  class='list-group-item' highlight-active>Backup/Restore</a>
                <a href='/admin/users'
                  class='list-group-item' highlight-active>Users</a>
                <a href='/admin/teams'
                  class='list-group-item' highlight-active>Teams</a>
                <a href='/admin/news'
                  class='list-group-item' highlight-active>News</a>
                <a href='/admin/pages'
                  class='list-group-item' highlight-active>Pages</a>
                <a href='/admin/tools'
                  class='list-group-item' highlight-active>Tools</a>
              </div>
              <div ng-controller='NewsCtrl' id='news-box'>
                <ul class='ng-hide' ng-show='newsItems'>
                  <!-- TODO: make this look better, seriously -->
                  <li ng-repeat='news in newsItems'
                  class='news-item'><p ng-bind-html='news.message|linky'></p>
                  <span class='byline'>{{news.author}} @
                      {{news.timestamp|date:'yyyy-MM-dd HH:mm'}}</span></li>
                </ul>
              </div>
          </div>
          <div class='col-md-9 col-sm-9'>
            <!-- TODO: title -->
            <h2></h2>
            {%- endraw %}
              <div ng-non-bindable>
                {% block body %}
                {% endblock %}
              </div>
            {% raw -%}
            <div ng-controller='ErrorCtrl'>
              <div class='ng-hide' ng-show='!!errors.length'>
                <div class='alert alert-{{e.severity}}'
                  ng-repeat='e in errors'>{{e.msg}}</div>
              </div>
            </div>
            <div ng-view></div>
          </div>
          <div class='fileupload'>
            <input class='invisible' type='file' id='new-attachment'/>
          </div>
        </div>
      </div>
    </div>

    {%- endraw %}
    <script src="/third_party/jquery/jquery{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/bootstrap/bootstrap{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/angular/angular{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/angular/angular-resource{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/angular/angular-route{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/angular/angular-sanitize{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/pagedown/Markdown.Converter.js"></script>
    <script src="/third_party/pagedown/Markdown.Sanitizer.js"></script>
    <script src="/third_party/chart/Chart{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/chart/Chart.Scatter{% if minify %}.min{% endif %}.js"></script>
    <script src="/third_party/moment/moment{% if minify %}.min{% endif %}.js"></script>
    <script src="/js/Chart.Step.js"></script>
    {% if minify -%}
    <script src="/js/app.min.js"></script>
    {% else -%}
    <script src="/js/directives.js"></script>
    <script src="/js/filters.js"></script>
    <script src="/js/services/admin.js"></script>
    <script src="/js/services/challenges.js"></script>
    <script src="/js/services/global.js"></script>
    <script src="/js/services/page.js"></script>
    <script src="/js/services/session.js"></script>
    <script src="/js/services/teams.js"></script>
    <script src="/js/services/upload.js"></script>
    <script src="/js/services/users.js"></script>
    <script src="/js/controllers/challenges.js"></script>
    <script src="/js/controllers/global.js"></script>
    <script src="/js/controllers/page.js"></script>
    <script src="/js/controllers/registration.js"></script>
    <script src="/js/controllers/scoreboard.js"></script>
    <script src="/js/controllers/teams.js"></script>
    <script src="/js/controllers/admin/challenges.js"></script>
    <script src="/js/controllers/admin/news.js"></script>
    <script src="/js/controllers/admin/page.js"></script>
    <script src="/js/controllers/admin/teams.js"></script>
    <script src="/js/controllers/admin/tools.js"></script>
    <script src="/js/app.js"></script>
    {%- endif %}
  </body>
</html>
